import React, { Component } from 'react'
import './index.scss'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

class Bmfind extends Component{
	constructor(props) {
		super(props);
		this.state = {
				bmfindData: this.props.bmfindData
		}
	}

	render() {
		return (
			<div id="bmfind">
					<p className="title">
							<span>斑马发现</span>
							<span className="right_all" onClick={this.toFind.bind(this)}>查看更多<i className="iconfont icon-right"/></span>
					</p>
					<div className="swiper-container-bmfind">
							<div className="swiper-wrapper">
									{
											this.state.bmfindData.map(item =>
													<div className="swiper-slide" key={item.id} onClick={this.toBmfindDetail.bind(this, item.id)}>
															<img src={item.img} alt=""/>
															<p>{item.title}</p>
													</div>
											)
									}
							</div>
					</div>
			</div>
		)
	}
	toFind() {
			this.props.history.push('/find')
	}
	toBmfindDetail(id) {
			// console.log(id)
			this.props.history.push(`/bmdetail/${id}`)
	}

		componentDidMount() {
				new Swiper('.swiper-container-bmfind', {
						slidesPerView: 1.7,
						spaceBetween: 20,
						freeMode: true,
				});
		}

}

export default Bmfind
